<template>
    <div id="content">
        <div class="content-left">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xuanxiang"></use>
            </svg>
            <div class="bread">
                <!-- {{bread}} -->
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: bread.level1.path }">
                    {{bread.level1.name}}
                    </el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: bread.level2.path }" v-show="bread.level2.name">
                      {{bread.level2.name}}
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>
                      {{bread.level3.name}}
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <div class="content-right">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-yingyongguanliyuanguanli"></use>
            </svg>
            <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                    Lisa<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-plus-outline">
                      螺蛳粉
                    </el-dropdown-item>
                    <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-check">
                      蚵仔煎
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import "@/assets/css/userStatus/font_sek2gdum37/iconfont.js";

import { mapState } from 'vuex'
export default {
    computed: {
      ...mapState('breadAbout',['bread'])
    }
};
</script>

<style lang='scss' scoped>
#content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  background-color: #ffffff;
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  .content-left {
    margin-left: 20px;
    display: flex;
    .icon {
      margin-right: 10px;
    }
  }
  .content-right {
    margin-right: 20px;
    .el-dropdown-link {
      //   margin-right: 20px;
      cursor: pointer;
      color: #0c0c0c;
    }
  }
}
</style>